<template>
  <div class="layout">
    <NavBar
      left-text="返回"
      fixed="true"
      placeholder="true"
      left-arrow
      @click-left="onClickLeft"
    ></NavBar>
    <tabs v-model:active="active">
      <tab
        title="卷包"
        title-style="font-weight:800; font-size:20px;height:56px"
      >
        <div class="voucher">
          <icon name="coupon" color="orangered" size="1.6rem" />
          <h3 class="dai">团购劵/代金券</h3>
          <div>
            立即查看
            <icon name="arrow" color="#999" />
          </div>
        </div>
        <div class="kabao">
          <h3>优惠劵</h3>
          <div class="anything">
            <img
              src="https://images.chinatimes.com/newsphoto/2020-10-15/656/20201015002375.jpg"
              alt=""
            />
            <div>去领卷中心</div>
          </div>
          <div class="record">
            <p>
              查看优惠劵历史纪录
              <icon name="arrow" />
            </p>
          </div>
        </div>
      </tab>

      <tab
        title="卡包"
        title-style="font-weight:800; font-size:20px;height:56px"
      >
        <div class="voucher">
          <icon name="coupon" color="orangered" size="1.6rem" />
          <h3 class="dai">团购劵/代金券</h3>
          <div>
            立即查看
            <icon name="arrow" color="#999" />
          </div>
        </div>
        <div class="kabao">
          <h3>优惠劵</h3>
          <div class="anything">
            <img
              src="http://www.bizhishe.com/d/file/2022-02-08/b3dddbd35251978bf0db6b33de9bfd32.jpg"
              alt=""
            />
            <div>去领卷中心</div>
          </div>
          <div class="record">
            <p>
              查看优惠劵历史纪录
              <icon name="arrow" />
            </p>
          </div>
        </div>
      </tab>
    </tabs>
  </div>
</template>
<script setup>
import { Tab, Tabs, NavBar, Icon } from 'vant'
import router from '../router'
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style scoped>
.voucher {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 30px auto;
  border: 1px solid #999999;
  height: 5rem;
  padding: 0 30px;
  gap: 20px;
}
.dai {
  flex: 1;
}
.kabao {
  width: 90%;
  margin: 20px auto;
  height: 70vh;
}
.anything {
  margin-top: 30px;
  display: flex;
  width: 100%;
  height: 52vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.anything img {
  width: 80%;
  margin: 0 auto;
  margin-top: -100px;
}

.anything div {
  width: 80%;
  margin: 20px auto;
  height: 50px;
  line-height: 50px;
  border: 1px solid orange;
  text-align: center;
  color: orange;
  border-radius: 30px;
}
.record {
  display: flex;
  justify-content: center;
  color: #999999;
}
</style>
